<template>
  <div class="app-container" @click="hideDiv">
    <el-row :gutter="20">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          v-show="showSearch"
          id="searchFrom"
        >
          <el-form-item>
            <el-input
              v-model="queryParams.searchValue"
              placeholder="姓名/工号/手机"
              clearable
              style="width: 180px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-select
              @click="hideDiv"
              v-model="queryParams.employeeStatus"
              placeholder="状态"
              clearable
              multiple
              style="width: 180px"
            >
              <el-option
                v-for="dict in rsgl_ygda_employee_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-tree-select
              clearable
              style="width: 180px"
              v-model="queryParams.deptId"
              :data="customerOption.deptId"
              :props="{
                value: 'id',
                label: 'label',
                children: 'children',
                disabled: 'disabled'
              }"
              placeholder="选择部门"
              value-key="id"
              filterable
            />
            <!--                        <treeselect :disable-branch-nodes="true" style="font-size: 14px;width: 180px;margin-left: 10px;"-->
            <!--                            v-model="queryParams.deptId" :options="customerOption.deptId" placeholder="选择部门" />-->
          </el-form-item>
          <el-form-item>
            <el-input
              style="width: 180px"
              v-model="queryParams.nativePlace"
              placeholder="请输入籍贯"
              @click="settingEvent($event)"
              @focus="showJgdiv = true"
            />
            <div
              class="jgdiv"
              :style="showJgdiv ? 'display:block' : 'display:none'"
            >
              <el-tabs
                v-model="activeName"
                @click="settingEvent($event)"
                @tab-click="handleClick"
              >
                <el-tab-pane
                  class="tab-pane"
                  v-for="item in tabRrr"
                  :label="item"
                  :name="item"
                >
                  <div
                    class="city-item-div"
                    @click.stop="handleItemClick(index, cityItem.city)"
                    v-for="(cityItem, index) in cityResponse.data"
                    :key="index"
                    :class="curIndex == index ? 'active' : ''"
                  >
                    {{ cityItem.city }}
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-form-item>
          <el-form-item>
            <el-select
              @click="hideDiv"
              v-model="queryParams.sex"
              placeholder="性别"
              clearable
              style="width: 180px"
            >
              <el-option
                v-for="dict in customerOption.sex"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              @click="hideDiv"
              v-model="queryParams.registeredType"
              placeholder="户口性质"
              clearable
              style="width: 180px"
            >
              <el-option
                v-for="dict in customerOption.registeredType"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              @click="hideDiv"
              v-model="queryParams.maritalStatus"
              placeholder="婚姻状况"
              clearable
              style="width: 179px"
            >
              <el-option
                v-for="dict in customerOption.maritalStatus"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              @click="hideDiv"
              v-model="queryParams.job"
              filterable
              placeholder="选择岗位"
              clearable
              style="width: 180px"
            >
              <el-option
                v-for="dict in customerOption.job"
                :key="dict.postId"
                :label="dict.postName"
                :value="dict.postName"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              @click="hideDiv"
              v-model="queryParams.positionRsnx"
              placeholder="入司年限"
              clearable
              style="width: 180px"
            >
              <el-option
                v-for="dict in rsgl_ygda_rsnx"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              @click="hideDiv"
              v-model="queryParams.positionNl"
              placeholder="年龄"
              clearable
              style="width: 180px"
            >
              <el-option
                v-for="dict in rsgl_ygda_nl"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select> </el-form-item
          ><el-form-item>
            <el-select
              @click="hideDiv"
              v-model="queryParams.political"
              placeholder="政治面貌"
              clearable
              style="width: 180px"
            >
              <el-option
                v-for="dict in customerOption.political"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              @click="hideDiv"
              v-model="queryParams.highestDegree"
              placeholder="学历"
              clearable
              style="width: 180px"
            >
              <el-option
                v-for="dict in customerOption.highestDegreeList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              @click="hideDiv"
              v-model="queryParams.certificateName"
              placeholder="证书名称"
              clearable
              style="width: 180px"
            >
              <el-option
                v-for="dict in rsgl_ygda_certificate_name"
                :key="dict.value"
                :label="dict.label"
                :value="dict.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              @click="hideDiv"
              v-model="queryParams.establishment"
              placeholder="编制情况"
              clearable
              style="width: 180px"
            >
              <el-option
                v-for="dict in rsgl_ygda_establishment"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item v-hasPermi="['system:employee:authority']">
            <el-select
              placeholder="VPN"
              v-model="queryParams.vpn"
              style="width: 180px"
              clearable
            >
              <el-option value="0" label="否"></el-option>
              <el-option value="1" label="是"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-hasPermi="['system:employee:authority']">
            <el-select
              placeholder="分类"
              v-model="queryParams.classes"
              style="width: 180px"
              clearable
            >
              <el-option
                v-for="item in rsgl_classes"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-hasPermi="['system:employee:authority']">
            <el-select
              placeholder="职类"
              v-model="queryParams.jobType"
              style="width: 180px"
              clearable
            >
              <el-option
                v-for="item in rgsl_job_type"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-hasPermi="['system:employee:authority']">
            <el-select
              placeholder="职称"
              v-model="queryParams.jobTitle"
              style="width: 180px"
              clearable
            >
              <el-option
                v-for="item in rgsl_job_title"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-date-picker
              v-model="leaveDateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="离职时间起"
              end-placeholder="离职时间止"
              style="width: 340px"
              value-format="YYYY-MM-DD"
              @change="leaveDateRangeChange"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-date-picker
              v-model="entryTimeRange"
              type="daterange"
              range-separator="至"
              start-placeholder="入职时间起"
              end-placeholder="入职时间止"
              style="width: 340px"
              value-format="YYYY-MM-DD"
              @change="entryTimeRangeChange"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-select
              placeholder="入职方式"
              v-model="queryParams.entryMethod"
              style="width: 180px"
            >
              <el-option
                v-for="item in rsgl_ygda_entrymethod"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select
              placeholder="是否应届生"
              v-model="queryParams.isTrainee"
              style="width: 180px"
            >
              <el-option value="0" label="否"></el-option>
              <el-option value="1" label="是"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="Search" @click.stop="handleQuery"
              >搜索</el-button
            >
            <el-button icon="Refresh" @click.stop="resetQuery">重置</el-button>
            <el-button
              type="primary"
              icon="Download"
              :loading="exportLoading"
              @click.stop="queryDownLoadTask"
              >导出</el-button
            >
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
            :columns="columns"
          ></right-toolbar>
        </el-row>
        <el-table
          @row-dblclick="dbSelected"
          stripe
          v-loading="loading"
          :data="employeeList"
          @sort-change="sortChange"
        >
          <el-table-column
            label="序号"
            sortable="custom"
            prop="xh"
            width="80"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="姓名"
            sortable="custom"
            prop="employeeName"
            :show-overflow-tooltip="true"
            v-if="columns[1].visible"
          />
          <el-table-column
            label="工号"
            width="120"
            sortable="custom"
            prop="employeeNo"
            :show-overflow-tooltip="true"
            v-if="columns[2].visible"
          />
          <el-table-column
            label="年龄"
            sortable="custom"
            prop="age"
            :show-overflow-tooltip="true"
            v-if="columns[3].visible"
          />
          <el-table-column
            label="籍贯"
            sortable="custom"
            prop="nativePlace"
            :show-overflow-tooltip="true"
            v-if="columns[4].visible"
          />
          <el-table-column
            label="婚姻状况"
            width="150"
            sortable="custom"
            prop="maritalStatus"
            :show-overflow-tooltip="true"
            v-if="columns[5].visible"
          >
            <template #default="scope">
              {{
                scope.row.maritalStatus == '1'
                  ? '已婚'
                  : scope.row.maritalStatus == '2'
                  ? '未婚'
                  : '其他'
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="学历"
            sortable="custom"
            prop="highestDegree"
            :show-overflow-tooltip="true"
            v-if="columns[6].visible"
          >
            <template v-slot="scope">
              {{
                rsgl_ygda_highest_degree.find(
                  item => item.value == scope.row.highestDegree
                )
                  ? rsgl_ygda_highest_degree.find(
                      item => item.value == scope.row.highestDegree
                    ).label
                  : ''
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="学位"
            sortable="custom"
            prop="degreeOne"
            :show-overflow-tooltip="true"
            v-if="columns[7].visible"
          />
          <el-table-column
            label="员工状态"
            width="150"
            sortable="custom"
            prop="employeeStatus"
            :show-overflow-tooltip="true"
            v-if="columns[8].visible"
          >
            <template v-slot="scope">
              {{
                rsgl_ygda_employee_status.find(
                  item => item.value == scope.row.employeeStatus
                )
                  ? rsgl_ygda_employee_status.find(
                      item => item.value == scope.row.employeeStatus
                    ).label
                  : ''
              }}
            </template>
          </el-table-column>

          <el-table-column
            label="入司时间"
            width="150"
            sortable="custom"
            prop="entryCompanyTime"
            :show-overflow-tooltip="true"
            v-if="columns[0].visible"
          />
          <el-table-column
            label="性别"
            sortable="custom"
            prop="sex"
            width="120"
            v-if="columns[9].visible"
          >
            <template #default="scope">
              {{ scope.row.sex == '1' ? '男' : '女' }}
            </template>
          </el-table-column>
          <el-table-column
            label="部门"
            sortable="custom"
            prop="deptName"
            width="120"
            v-if="columns[10].visible"
          />
          <el-table-column
            label="单位"
            sortable="custom"
            prop="companyName"
            width="120"
            v-if="columns[11].visible"
          />
          <el-table-column
            label="岗位"
            sortable="custom"
            prop="job"
            width="120"
            v-if="columns[12].visible"
          />
          <el-table-column
            label="手机号"
            sortable="custom"
            prop="mobile"
            width="120"
            v-if="columns[13].visible"
          />
          <el-table-column
            label="离职时间"
            sortable="custom"
            prop="leaveDate"
            width="120"
            v-if="columns[14].visible"
          />
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList()"
        />
      </el-col>
    </el-row>

    <!-- 导出列表框 -->
    <el-dialog
      title="导出"
      v-model="showExportTask"
      width="600"
      @close="closeInterval"
    >
      <el-row
        v-for="item in downloadTaskList"
        :key="item.fileId"
        class="my-20px taskList"
      >
        <el-col :span="8">{{ item.createTime }}</el-col>
        <el-col :span="3">{{
          item.state == '1' ? '下载完成' : '下载中'
        }}</el-col>
        <el-col :span="4" v-if="item.state == '1' && item.url">
          <a :href="item.url" class="color-#4a9eff" download>下载</a></el-col
        >
      </el-row>
      <template #footer>
        <div>
          <el-button type="primary" @click="handleExport">新建任务</el-button>
          <el-button @click="closeExportTask">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Dasc">
import { treeselect } from '@/api/rsgl/zzjg'
import { listEmployee } from '@/api/rsgl/ygda'
import {
  listJob,
  cityList,
  exportEmployee,
  getExportList
} from '@/api/rsgl/ygda'
import { getCurrentInstance, reactive, toRaw, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'
const { proxy } = getCurrentInstance()
const {
  rsgl_ygda_employee_status,
  rsgl_classes,
  rgsl_job_type,
  rgsl_job_title,
  rsgl_ygda_entrymethod
} = proxy.useDict(
  'rsgl_ygda_employee_status',
  'rsgl_classes',
  'rgsl_job_type',
  'rgsl_job_title',
  'rsgl_ygda_entrymethod'
)
const router = useRouter()
const data = reactive({
  showJgdiv: false,
  curIndex: 0,
  tabRrr: ['热门', 'ABC', 'DEF', 'GHJ', 'KLM', 'NPQ', 'RST', 'WXYZ'],
  activeName: '热门',
  cityResponse: [],
  customerOption: {
    // 所属部门列表
    deptId: [],

    // 性别
    sex: [
      { label: '男', value: '1' },
      { label: '女', value: '2' }
    ],
    // 户口性质
    registeredType: [],
    // 婚姻状况
    maritalStatus: [
      { label: '已婚', value: '1' },
      { label: '未婚', value: '2' },
      { label: '其他', value: '3' }
    ],
    // 岗位
    job: [],
    // 入司年限
    positionRsnx: [],
    // 年龄
    positionNl: [],

    // 政治面貌
    political: [
      { label: '中共党员', value: '1' },
      { label: '团员', value: '2' },
      { label: '群众', value: '3' },
      { label: '民主党派', value: '4' }
    ],

    // 学历
    highestDegreeList: []
  },
  // 遮罩层
  loading: true,
  // 导出遮罩层
  exportLoading: false,
  // 显示搜索条件
  showSearch: true,
  // 总条数
  total: 0,
  // 用户表格数据
  employeeList: null,
  // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    searchValue: undefined,
    employeeStatus: undefined,
    deptId: undefined,
    nativePlace: undefined,
    sex: undefined,
    registeredType: undefined,
    maritalStatus: undefined,
    job: undefined,
    political: undefined,
    highestDegree: undefined,
    certificateName: undefined,
    establishment: undefined
  },

  // 列信息
  columns: [
    { key: 0, label: '入司时间', visible: true },
    { key: 1, label: '姓名', visible: true },
    { key: 2, label: '工号', visible: true },
    { key: 3, label: '年龄', visible: false },
    { key: 4, label: '籍贯', visible: true },
    { key: 5, label: '婚姻状况', visible: false },
    { key: 6, label: '学历', visible: true },
    { key: 7, label: '学位', visible: true },
    { key: 8, label: '员工状态', visible: true },
    { key: 9, label: '性别', visible: false },
    { key: 10, label: '部门', visible: true },
    { key: 11, label: '单位', visible: true },
    { key: 12, label: '岗位', visible: false },
    { key: 13, label: '手机号', visible: false },
    { key: 14, label: '离职时间', visible: false }
  ]
})

const {
  showJgdiv,
  curIndex,
  tabRrr,
  activeName,
  cityResponse,
  customerOption,
  // 遮罩层
  loading,
  // 导出遮罩层
  exportLoading,
  // 显示搜索条件
  showSearch,
  // 总条数
  total,
  // 用户表格数据
  employeeList,
  // 查询参数
  queryParams,

  // 列信息
  columns
} = toRefs(data)

//获取字典
const {
  rsgl_ygda_position,
  rsgl_ygda_rsnx,
  rsgl_ygda_nl,
  rsgl_ygda_highest_degree,
  rsgl_ygda_registered,
  rsgl_ygda_certificate_name,
  rsgl_ygda_establishment
} = proxy.useDict(
  'rsgl_ygda_position',
  'rsgl_ygda_rsnx',
  'rsgl_ygda_nl',
  'rsgl_ygda_highest_degree',
  'rsgl_ygda_registered',
  'rsgl_ygda_certificate_name',
  'rsgl_ygda_establishment'
)

async function handleClick() {
  curIndex.value = -1
  console.log(activeName)
  cityResponse.value = await cityList({ type: activeName })
  console.log('handleClick')
}

function handleItemClick(index, name) {
  curIndex.value = index
  queryParams.value.nativePlace = name
  showJgdiv.value = false
}

function hideDiv() {
  showJgdiv.value = false
  console.log('hideDiv')
}

function settingEvent(event) {
  console.log('settingEvent')
  event.stopPropagation() //此区域不受上面方法的影响
}

/** 查询用户列表 */
function getList(orderBy) {
  loading.value = true
  const params = { ...queryParams.value, orderBy }
  if (queryParams.value.employeeStatus) {
    params.employeeStatus = queryParams.value.employeeStatus.toString()
  }
  Object.keys(params).forEach(v => {
    if (!params[v]) {
      delete params[v]
    }
  })
  listEmployee(params).then(response => {
    employeeList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

function sortChange(column) {
  var orderBy = ''
  if (column) {
    if (column.order === 'ascending') {
      //这里双重判断：该字段为升序时向后端传递升序参数，反之降序
      orderBy = column.prop + ' asc'
    } else if (column.order === 'descending') {
      orderBy = column.prop + ' desc'
    }
    getList(orderBy)
  }
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  leaveDateRange.value = ''
  entryTimeRange.value = ''
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    searchValue: undefined,
    employeeStatus: undefined,
    deptId: undefined,
    nativePlace: undefined,
    sex: undefined,
    registeredType: undefined,
    maritalStatus: undefined,
    job: undefined,
    political: undefined,
    highestDegree: undefined
  }
  handleQuery()
}

/** 导出按钮操作 */
const userStore = useUserStore()
function handleExport() {
  proxy
    .$confirm('是否确认导出相关人员记录？', '操作确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      icon: 'QuestionFilled',
      type: 'warning'
    })
    .then(() => {
      // proxy.downLoadByUrl('/system/employee/export', queryParams.value)
      const params = {
        loginUserId: userStore.user.userId,
        fileType: 'dasc',
        ...queryParams.value
      }
      if (params.employeeStatus) {
        params.employeeStatus = queryParams.value.employeeStatus.toString()
      }
      exportEmployee(params).then(response => {
        // console.log(response)
        proxy.$modal.msgSuccess('新建导出任务成功,请耐心等待导出完成')
        queryDownLoadTask()
      })
    })
}
// 表格双击按钮
function dbSelected(row) {
  router.push({
    path: '/rsgl/rs/detailYgda',
    query: { employeeId: row.employeeId }
  })
}
async function init() {
  clearInterval(timer.value)
  // 籍贯
  cityResponse.value = await cityList({ type: '热门' })

  // 所属单位列表
  let treeselectResponse = await treeselect()
  customerOption.value.deptId = treeselectResponse.data

  // 岗位
  let jobResponse = await listJob()
  customerOption.value.job = jobResponse.data

  // 职务
  let positionResponse = await toRaw(rsgl_ygda_position.value)
  customerOption.value.position = positionResponse.data

  //学历
  let highestDegreeResponse = await toRaw(rsgl_ygda_highest_degree.value)
  customerOption.value.highestDegreeList = []
  highestDegreeResponse.forEach(item => {
    customerOption.value.highestDegreeList.push({
      value: item.value,
      label: item.label
    })
  })

  //户口性质
  let registeredTypeResponse = toRaw(rsgl_ygda_registered.value)
  customerOption.value.registeredType = []
  registeredTypeResponse.forEach(item => {
    customerOption.value.registeredType.push({
      label: item.label,
      value: item.value
    })
  })
  //证书名称

  // 入司年限
  // let positionRsnx = await toRaw(rsgl_ygda_rsnx.value)
  // customerOption.value.positionRsnx = positionRsnx.data

  // 年龄
  // let positionNl = await toRaw(rsgl_ygda_nl.value)
  // customerOption.value.positionNl = positionNl.data

  await getList()
}

// 导出任务弹出
const showExportTask = ref(false)
function closeExportTask() {
  showExportTask.value = false
  clearInterval(timer.value)
}

const downloadTaskList = ref([])
function queryDownLoadTask() {
  showExportTask.value = true
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
  getExportList({ createId: userStore.user.userId, type: 'dasc' }).then(res => {
    console.log(res, '返回')
    downloadTaskList.value = res.data
    if (res.data.find(v => v.state == 0)) {
      setIntervalQuery(3000, 30)
    }
  })
}

const timer = ref(null)
//设置定时查询下载列表
/**
 *  @params delay 延迟时间
 *  @params num 查询次数
 *  @params todo unitlClose 关闭弹窗后关闭定时器， true时num无效
 * */
function setIntervalQuery(delay = 3000, num = 30) {
  console.log(123333, timer.value)
  timer.value = setInterval(() => {
    getExportList({ createId: userStore.user.userId, type: 'ygda' })
      .then(res => {
        console.log(res, '返回')
        downloadTaskList.value = res.data
        if (!res.data.find(v => v.state == '0')) {
          clearInterval(timer.value)
        }
      })
      .finally(() => {
        num--
        if (num == 0) {
          clearInterval(timer.value)
        }
      })
  }, delay)
}

function closeInterval() {
  if (timer.value) {
    console.log('clear', timer.value)
    clearInterval(timer.value)
    timer.value = null
  }
}

const leaveDateRange = ref()
const entryTimeRange = ref()
// 离职时间筛选
function leaveDateRangeChange() {
  if (leaveDateRange.value && leaveDateRange.value.length > 0) {
    queryParams.value.leaveDateBeginTime = leaveDateRange.value[0]
    queryParams.value.leaveDateEndTime = leaveDateRange.value[1]
  } else {
    queryParams.value.leaveDateBeginTime = ''
    queryParams.value.leaveDateEndTime = ''
  }
}
// 入职时间筛选
function entryTimeRangeChange() {
  if (entryTimeRange.value && entryTimeRange.value.length > 0) {
    queryParams.value.entryCompanyTimeBeginTime = entryTimeRange.value[0]
    queryParams.value.entryCompanyTimeEndTime = entryTimeRange.value[1]
  } else {
    queryParams.value.entryCompanyTimeBeginTime = ''
    queryParams.value.entryCompanyTimeEndTime = ''
  }
}
init()
</script>

<style scoped lang="scss">
::v-deep {
  .el-table__row {
    // cursor: pointer;
  }
  .el-table tr {
    cursor: pointer;
  }
}
::v-deep .el-tabs__item {
  padding: 0 10px;
}
#searchFrom {
  :deep .el-form-item {
    margin-right: 10px;
  }
}
.jgdiv {
  border: solid 1px #dfe4ed;
  padding: 10px 20px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  position: absolute;
  border-radius: 4px;
  z-index: 9999;
  margin-left: 12px;
  margin-top: 200px;
  background-color: #fff;

  .tab-pane {
    display: flex;
    // align-items: center;
    flex-wrap: wrap;
    max-height: 274px;
    overflow-y: scroll;

    .city-item-div {
      margin-bottom: 10px;
      border-radius: 4px;
      width: 70px;
      // height: 30px;
      line-height: 20px;
      padding: 5px 10px;

      display: flex;
      // align-items: center;
      padding-left: 10px;
      cursor: pointer;
    }

    .active {
      background-color: #409eff;
      color: #fff;
    }
  }
}
.taskList {
  .el-col {
    display: flex;
    align-items: center;
  }
}
</style>
